<template>
  <div class="comTopNavBar">
    <van-nav-bar
      safe-area-inset-top
      :title="topNavBarObj.title || '默认'"
      left-arrow
      @click-left="onClickLeftIcon"
    >
      <template #right>
        <van-icon
          :name="(isShowSearchBox || isShowDateBox) ? 'cross' : 'search'"
          size="20"
          @click="onClickSearchIcon"
        />
      </template>
    </van-nav-bar>

    <van-overlay
      :show="showOverlayForSearchOrQuery"
      @click="showOverlayForSearchOrQuery = false"
      class-name="com_over_layer"
    >
      <van-cell-group class="layer">
        <van-cell value="搜索（按关键字）" @click="isShowSearchBox = true" />
        <van-cell value="查询（按日期）" @click="isShowDateBox = true" v-show="!isHiddenDate" />
      </van-cell-group>
    </van-overlay>

    <div :class="{two_search: (isShowSearchBox || isShowDateBox) }">
      <van-search
        v-show="isShowSearchBox"
        v-model="keywordVal"
        :placeholder="topNavBarObj.searchPlaceholder || '请输入关键字搜索'"
        show-action
        shape="round"
        @search="onSearch"
        @clear="onClearVal"
      >
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
      <com-search-by-date
        v-show="isShowDateBox"
        ref="com-search-by-date"
        @getCalendarValue="toGetCalendarValue"
        :label="topNavBarObj.dateLabel || 'Demo'"
      ></com-search-by-date>
    </div>




  </div>

</template>

<script>
import {Toast} from "vant";
import comSearchByDate from "./comSearchByDate";

export default {
  name: "comTopNavBar",
  props: ['topNavBarObj', 'isHiddenDate'],
  components: {
    comSearchByDate,
  },

  data(){
    return {
      // 搜索图标
      isShowSearchBox: false,
      isShowDateBox: false,
      keywordVal: '',
      showOverlayForSearchOrQuery: false,
    }
  },

  methods: {
    onClickLeftIcon(){
      if (this.pathForLeft){
        this.$router.push(this.pathForLeft)
      } else {
        this.$router.back();
      }
    },

    onClickSearchIcon(){

      if(this.isShowSearchBox || this.isShowDateBox){
        this.isShowSearchBox = false;
        this.isShowDateBox = false

        // 恢复默认了, 需要重置请求
        this.$emit('toGetKeywordOrDateStr', {
          date: '',
          keyword: '',
        });

      } else {
        this.showOverlayForSearchOrQuery = !this.showOverlayForSearchOrQuery;
      }
      // 必执行的
      this.keywordVal = '';
      this.$refs["com-search-by-date"].toResetCalendarValue();
    },

    onSearch() {
      if (this.keywordVal){
        this.$emit('toGetKeywordOrDateStr', {
          date: '',
          keyword: this.keywordVal,
        })
      } else {
        Toast('请先输入！')
      }
    },
    onClearVal() {
      Toast('已清空');
      this.$emit('toGetKeywordOrDateStr', {
        date: '',
        keyword: '',
      })
    },

    toGetCalendarValue(dateVal) {
      console.log('子组件到父组件的数据', dateVal);
      this.$emit('toGetKeywordOrDateStr', {
        date: this.$route.name === 'wageSettlement' ? `${dateVal}-01` : dateVal,
        keyword: '',
      })
    },

  }

}
</script>

<style lang="scss" scoped>
.comTopNavBar{
  .com_over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 40%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  .two_search{
    margin: 8px 0 8px 0;
    border: 1px solid #eeeeee;
  }
}
</style>
